<template>
  <div class="author_detalis">
    <!--头部navbar-->
    <AuthorDetailsNavbar />
    <!--个人信息-->
    <div class="author_detalis-info" v-if="userMessage">
      <!--left头像-->
      <van-image
        round
        width="6.2rem"
        height="6.2rem"
        :src="userMessage.user_avatar"
        class="info-picture"
      />
      <!--right资料-->
      <div class="userInfo">
        <div class="user_name">
          <span class="info-name">{{ userMessage.user_name }}</span>
          <svg class="nannv_icon" aria-hidden="true">
            <use
              :xlink:href="
                userMessage.user_gender == '女'
                  ? '#icon-nannv'
                  : '#icon-nannv-copy'
              "
            ></use>
          </svg>
        </div>
        <div class="user_intro">
          <span>简介:</span>
          <p>
            {{ userMessage.user_intro ? userMessage.user_intro : "暂无介绍~" }}
          </p>
        </div>
        <div class="user_atte">
          <span class="info-atte"
            >关注 <i>{{ userMessage.user_focus }}</i></span
          >&nbsp;&nbsp;&nbsp;
          <span class="info-fans"
            >粉丝 <i>{{ userMessage.user_fans }}</i></span
          >
          <!--私聊-->
          <div
            class="user_private"
            @click="handlePrivate(userMessage.user_id, userMessage.user_name)"
          >
            <span>私聊:</span>
            <svg class="icon_private" aria-hidden="true">
              <use xlink:href="#icon-siliao"></use>
            </svg>
          </div>
        </div>
      </div>
      <!--等级图标-->
      <div class="use_dan">
        <svg class="baiyinqishi_icon" aria-hidden="true">
          <use
            :xlink:href="
              userMessage.user_integral <= '10'
                ? '#icon-dengji'
                : integral <= '100'
                ? '#icon-baiyinqishi'
                : '#icon-dengji1'
            "
          ></use>
        </svg>
      </div>
    </div>
    <!--table-->
    <div class="author_detalis_table">
      <div
        class="table_grid"
        :class="seleTable == 'bookmark' ? 'activeBac' : ''"
        @click="onTable('bookmark')"
      >
        <van-icon name="bookmark-o" size="2.1rem" color="#ffab42" />
        <span>发布</span>
      </div>
      <div
        class="table_grid"
        :class="seleTable == 'envelop' ? 'activeBac' : ''"
        @click="onTable('envelop')"
      >
        <van-icon name="envelop-o" size="2.1rem" color="#ffab42" />
        <span>通知</span>
      </div>
      <div
        class="table_grid"
        :class="seleTable == 'like' ? 'activeBac' : ''"
        @click="onTable('like')"
      >
        <van-icon name="like-o" size="2.1rem" color="#ffab42" />
        <span>领养</span>
      </div>
      <div
        class="table_grid"
        :class="seleTable == 'star' ? 'activeBac' : ''"
        @click="onTable('star')"
      >
        <van-icon name="star-o" size="2.1rem" color="#ffab42" />
        <span>收藏</span>
      </div>
    </div>
    <!--内容列表-->
    <div class="author_detalis_list">
      <router-view />
    </div>
    <!--返回首页-->
    <ToHome />
  </div>
</template>

<script>
import AuthorDetailsNavbar from "@/views/authorTable/component/AuthorDetailsNavbar";
import { ref, watchEffect } from "vue";
import { useRoute, useRouter } from "vue-router";
import { gitUsermessage } from "@/api/home";
import ToHome from "@/components/ToHome";
export default {
  name: "authorDetails",
  components: { ToHome, AuthorDetailsNavbar },
  setup() {
    const router = useRouter();
    //获取此用户信息
    const { route, userMessage, GitUsermessage } = handleGitUsermessage();
    GitUsermessage();
    //选择标签项
    const seleTable = ref("bookmark");
    watchEffect(() => {
      //获取路由并修改标签选中值
      seleTable.value = route.fullPath.split("/")[3] || "bookmark";
    });
    const onTable = (value) => {
      seleTable.value = value;
      //切换路由
      router.push({ path: `/authorTable/${route.params.id}/${value}` });
    };
    //跳转至聊天页面
    const handlePrivate = (id, name) => {
      router.push(`/talk/${id}/${name}`);
    };
    return { route, seleTable, onTable, userMessage, handlePrivate };
  },
};
//获取此用户信息
function handleGitUsermessage() {
  const route = useRoute();
  const userMessage = ref(null);
  const GitUsermessage = () => {
    gitUsermessage(route.params.id).then((res) => {
      // console.log(res);
      if (res.status == 200) {
        userMessage.value = res.data;
      }
    });
  };
  return { route, userMessage, GitUsermessage };
}
</script>

<style scoped lang="less">
.author_detalis {
  padding-top: 2.6rem;
  box-sizing: border-box;
}
.author_detalis-info {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  //background-color: #ffa6002e;
  height: 10rem;
  padding: 0 1.2rem;
  box-sizing: border-box;
  background-image: url("../../assets/images/backImg (2).jpg");
  background-size: 100% 108%;
  background-repeat: no-repeat;
  .van-icon-arrow {
    float: right;
    top: -3rem;
    right: 1rem;
  }
  .userInfo {
    width: 60%;
    margin-bottom: 2.2rem;
    .info-name {
      font-size: 1.3rem;
      font-weight: 600;
      color: #000;
    }
    .user_intro {
      display: flex;
      align-items: center;
      padding: 0.2rem 1rem 0.2rem 0rem;
      box-sizing: border-box;
      span {
        white-space: nowrap;
        color: #ed6a0ce0;
      }
      p {
        margin: 0;
        font-size: 0.85rem;
        color: #545559;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .user_atte {
      position: relative;
      margin-top: 0.2rem;
      .user_private {
        position: absolute;
        top: 2rem;
        //right: 0rem;
        display: flex;
        align-items: center;
        span {
          font-size: 0.9rem;
          color: #969799;
          margin-right: 0.2rem;
        }
      }
      .info-atte,
      .info-fans {
        color: #795f80;
        i {
          color: #e27070db;
        }
      }
    }
  }
  .use_dan {
    position: absolute;
    top: 1rem;
    right: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    //span{
    //  font-size: 0.9rem;
    //  color: rgb(255 255 255);
    //}
  }
}
.author_detalis_table {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.3rem;
  .table_grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-items: center;
    padding: 0.6rem 1.6rem;
    background-color: #fff;
    span {
      font-size: 0.9rem;
      color: #737883;
      margin-top: 0.1rem;
    }
  }
  .activeBac {
    border: 1.5px solid #ffab42;
    span {
      color: #ffab42;
    }
  }
}
.baiyinqishi_icon,
.nannv_icon,
.icon_private {
  width: 1em;
  height: 1em;
  fill: currentColor;
  overflow: hidden;
}
.baiyinqishi_icon {
  width: 2em;
  height: 2em;
}
.nannv_icon {
  margin: 0 0 0.3rem 0.6rem;
}
.icon_private {
  margin-right: 0;
  width: 1.6em;
  height: 1.6em;
}
</style>
